<!-- 通用的分类组件 -->
<template>
  <div class="p-5">
    <div class="card-box">
      <SearchView @query="querybtn" @reset="resetbtn" :catelist="comclasslist" />
    </div>

    <div class="card-box box mt-5">
      <div class="btns">

        <a-button type="primary" @click="openbtn(null)">
          <template #icon>
            <PlusOutlined />
          </template>新增营养素
        </a-button>
      </div>


      <a-table :columns="columns" :data-source="newdata.list" :pagination="false" :loading="loading">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'icon'">
            <a-image :width="100" :src="record.icon" />
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" primary @click="editbtn(record)">编辑</a-button>
            <a-button type="link" danger @click="deleteBtn(record.id)">删除</a-button>
          </template>
        </template>
      </a-table>
      <PageView />
    </div>
    <addView v-model:value="newdata.open" :type="newdata.type" :editdata="newdata.editinfo" :unitlist="newdata.unitlist"
      :catelist="comclasslist" @submit="submitbtn" />
  </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, createVNode, watch } from "vue";

import { PlusOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import * as api from "#/api/core/nutrition.ts";

import addView from "./addView.vue";
import SearchView from "./searchView.vue";

import PageView from "#/components/PageView/index.vue";
import { useRequest, createUseRequestComponent } from "vue-hooks-plus";
import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
import { getcomlist } from "#/hooks/common.ts";
import { mapCatename, onemapCatename } from '#/utils/index.js'

// import { getcata } from '#/utils/index.js'



// 定义接口类型
interface NewData {
  type: "add" | "update"; // 限制 type 只能是 'add' 或 'edit'
  editinfo: any; // 根据实际情况替换 any 为具体类型，比如 YourEditInfoType
  open: boolean;
  current: number;
  pagesize: number;
  query: any;
  list: any,
}

const newdata: NewData = reactive({
  open: false,
  type: "add",
  editinfo: null,
  current: 1,
  pagesize: 20,
  query: {},
  unitlist: [],
  list: []
});

const columns = [
  {
    title: "名称",
    dataIndex: "name",
    align: "center",
    key: "name",
  },
  {
    title: "单位",
    dataIndex: "unitCode",
    align: "center",
    key: "unitCode",
  },
  {
    title: "所属分类",
    dataIndex: "catename",
    align: "center",
    key: "catename",
  },

  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    key: "action",
  },
];


const openbtn = (e: any) => {
  newdata.type = "add";
  newdata.editinfo = e;
  newdata.open = true;
};

const editbtn = (e: any) => {
  newdata.type = "update";
  newdata.editinfo = e;
  newdata.open = true;
};

const querybtn = (e: any) => {
  console.log("e", e);
  newdata.query = e;
  run();
};

const resetbtn = (e: any) => {
  newdata.query = e;
  console.log('重置表单', e, newdata.query
  );

  run();
};

const { data, loading, error, run } = useRequest(
  () =>
    api.$getlist({
      // pagesize: newdata.pagesize,
      // current: newdata.current,
      ...newdata.query,
    }),
  {
    manual: true, //手动触发
    onSuccess: async (result) => {

      newdata.list = await onemapCatename(result, 3)

      console.log("获取分类数据", newdata.list);
      // 此时 data.value 与 result 是一致的

    },
  }
);

run();

const submitbtn = () => {
  newdata.current = 1;
  run();
};



// 获取分类
const { comclasslist } = getcomlist(3);

// 获取单位列表
const getunitlist = async () => {
  try {
    newdata.unitlist = await api.$getunitlist();
    console.log("获取单位列表", newdata.unitlist);
  } catch { }
};


console.log('111', comclasslist.value);

getunitlist();

const deleteBtn = async (id: any) => {
  Modal.confirm({
    title: "提示",
    icon: createVNode(ExclamationCircleOutlined),
    content: "确定要删除该数据?",
    async onOk() {
      try {
        await api.$deletenutr({}, id);
        message.success("删除成功");
        newdata.current = 1;
        run();
      } catch { }
    },
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    onCancel() { },
  });
}




</script>
<style scoped lang="less">
.btns {

  padding: 1.25rem 0;

  button {
    margin: 0 5px;
  }
}

.box {
  min-height: 100px;

  // box-sizing: border-box;
  // padding: 20px;
}
</style>
